var websocket = null;

//判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
if ('WebSocket' in window) {
    // websocket = new WebSocket("ws://localhost:9411/music/chat");
    websocket = new WebSocket("ws://47.103.202.101:9411/music/chat");
} else {
    alert('本聊天室不支持当前浏览器访问,请尝试更换谷歌,IE9+浏览器')
}
//连接发生错误的回调方法
websocket.onerror = function () {
    alert("连接服务器错误!请刷新页面重试!")
};
//连接成功建立的回调方法
websocket.onopen = function (event) {
    // websocket.send("成功连接");
    //setMessageInnerHTML("open");
}
//接收到消息的回调方法
websocket.onmessage = function (event) {
    // alert(event.data);
    // alert(JSON.parse(event.data).name)
    var obj = JSON.parse(event.data);
    if (obj.type == "system") {
        var son = document.createElement("p");
        son.style.backgroundColor = "orange";
        son.style.clear = "both";
        son.style.float = "left";
        son.style.marginLeft = "5px";
        son.innerText = obj.message;
        father.appendChild(son);
        // txt.value="";
        son.scrollIntoView();
        document.getElementById("count").innerText = "当前在线人数:" + obj.count + "人";
    } else {
        if (obj.type == "message") {
            father.appendChild(document.createElement("br"));
            var time = document.createElement("span");
            // time.style.backgroundColor="#DCDCDC";
            time.style.clear = "both";
            time.style.float = "left";
            time.style.marginLeft = "5px";
            time.innerText = obj.time;
            father.appendChild(time);
            father.appendChild(document.createElement("br"));
            var son = document.createElement("p");
            // son.style.backgroundColor="#DCDCDC";
            son.style.clear = "both";
            son.style.float = "left";
            son.style.marginLeft = "5px";
            son.innerText = obj.message;
            father.appendChild(son);
            // txt.value="";
            son.scrollIntoView();
        }
    }
    // setMessageInnerHTML(event.data);
}

//连接关闭的回调方法
websocket.onclose = function () {
    var son = document.createElement("p");
    son.style.backgroundColor = "orange";
    son.style.clear = "both";
    son.style.float = "left";
    son.style.marginLeft = "5px";
    son.innerText = "连接关闭,服务器异常";
    father.appendChild(son);
    // txt.value="";
    son.scrollIntoView();
    // document.getElementById("count").innerText="当前在线人数:"+obj.count+"人";
};
window.onbeforeunload = function () {
    websocket.close();
}


var btn = document.getElementById("btn");
var message = document.getElementById("message");
var system = document.getElementById("system");
var txt = document.getElementById("txt");
var father = document.getElementById("father")
var nickname = document.getElementById("nickname")
var p = document.getElementsByTagName("p");
btn.onclick = function () {
    if (txt.value == "" || nickname.value == "") {
        alert("昵称和信息均不能为空");
    } else {
        var message = txt.value;
        var name = nickname.value;
        websocket.send("[" + name + "]说:" + message);
        var son = document.createElement("p");
        son.style.backgroundColor = "yellow";
        son.style.clear = "both";
        son.style.float = "right";
        son.style.marginRight = "5px";
        son.innerText = txt.value;
        father.appendChild(son);
        txt.value = "";
        son.scrollIntoView();
    }

}
/*message.onclick=function (ev) {
    father.appendChild(document.createElement("br"));
    var time=document.createElement("span");
    // time.style.backgroundColor="#DCDCDC";
    time.style.clear="both";
    time.style.float="left";
    time.style.marginLeft="5px";
    time.innerText="2021-02-06 20:08:08";
    father.appendChild(time);
    father.appendChild(document.createElement("br"));
    var son = document.createElement("p");
    // son.style.backgroundColor="#DCDCDC";
    son.style.clear="both";
    son.style.float="left";
    son.style.marginLeft="5px";
    son.innerText="新消息";
    father.appendChild(son);
    txt.value="";
    son.scrollIntoView();
};
system.onclick=function (ev) {
    var son = document.createElement("p");
    son.style.backgroundColor="orange";
    son.style.clear="both";
    son.style.float="left";
    son.style.marginLeft="5px";
    son.innerText="系统通知:@1进入了房间";
    father.appendChild(son);
    txt.value="";
    son.scrollIntoView();
}
*/
document.onkeydown = function (evt) {
    var e = evt || event;
    e.keyCode = e.which = e.charCode;
    if (e.keyCode == 13 || e.keyCode == 10) {
        if (txt.value == "" || nickname.value == "") {
            alert("昵称和信息均不能为空");
        } else {
            var message = txt.value;
            var name = nickname.value;
            websocket.send("[" + name + "]说:" + message);
            var son = document.createElement("p");
            son.style.backgroundColor = "yellow";
            son.style.clear = "both";
            son.style.float = "right";
            son.style.marginRight = "5px";
            son.innerText = txt.value;
            father.appendChild(son);
            txt.value = "";
            son.scrollIntoView();
        }
    }
}
